<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--
        需求1: 定义一个v-big指令, 和v-text功能类似，但会把绑定的元素变成10倍
        需求2: 定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点
        自定义指令总结:
            一、定义语法：
                （1）.局部指令
                    new Vue({
                        directives: {指令名:配置对象} 或 new Vue({
                            directives(){}
                        })
                    })
                 (2). 全局指令:
                    Vue.directives(指令名,配置对象) 或 Vue.directives(指令名, 回调函数)

            二、配置对象中常用的3个回调函数
                (1).bind: 指令与元素成功绑定时调用
                (2).inserted: 指令所在模板被编译到页面时调用
                (3).update: 指令所在模板被重新解析时调用
            三、备注：
                1. 指令定义时不加v-,但使用时要加v-
                2. 指令名如果含有多个单词,需要使用中划线（kebab-case命名方式）隔开，指令会自动转换为camelCase格式
    -->
    <!--准备好一个容器-->
    <div id="root">
        <h2>{{name}}</h2>
        <h2>当前的n值是: <span v-text="n"></span></h2>
        <h2>放大10倍后的n值是: <span v-big="n"></span></h2>
        <button @click="n++">点我n加1</button>
        <hr/>
<!--        <input type="text" v-fbind:value="n">-->
    </div>
    <div id="root2">
        <input type="text" v-fbind2:value="x">
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        // 定义全局指令
        Vue.directive('fbind2',{
            // 指令与元素成功绑定（一上来）
            bind(element,binding) {
                element.value = binding.value
            },
            // 指令所在元素被插入页面时
            inserted(element,binding) {
                element.focus()
            },
            // 指令所在的模板被重新解析时（更新时）
            update(element,binding) {
                element.value = binding.value
            }
        })

        new Vue({
            el:  '#root',
            data: {
                name: '尚硅谷',
                n: 1
            },
            directives: {
                // big函数何时会被调用？
                // 1. 指令与元素成功绑定时（一上来）。
                // 2. 指令所在的模板被重新解析时。
                big: function() {
                    console.log('big')
                },
            }
        })

        new Vue({
            el: '#root2',
            data: {
                x:1
            }
        })
    </script>
</body>
</html>
